<template>
	<div class="screen1-module1-content">
		<div class="thead">
			<div class="thead-inner">
				<div class="first-cell"></div>
				<div class="use-cell">下发数</div>
				<div class="use-cell">完成数</div>
			</div>
		</div>
		<div class="tbody">
			<div class="t-row">
				<div class="first-cell">今年</div>
				<div class="use-cell">
					<div class="num-div num-div-total">
						<div class="corner coner-top-left"></div>
						<div class="corner coner-top-right"></div>
						<div class="corner coner-bottom-left"></div>
						<div class="corner coner-bottom-right"></div>
						<span>{{ _numbers.yearCount}}</span>
					</div>
				</div>
				<div class="use-cell">
					<div class="num-div num-div-total">
						<div class="corner coner-top-left"></div>
						<div class="corner coner-top-right"></div>
						<div class="corner coner-bottom-left"></div>
						<div class="corner coner-bottom-right"></div>
						<span>{{_numbers.yearComplete}}</span>
					</div>
				</div>
			</div>
			<div class="t-row">
				<div class="first-cell">当月</div>
				<div class="use-cell">
					<div class="num-div num-div-total">
						<div class="corner coner-top-left"></div>
						<div class="corner coner-top-right"></div>
						<div class="corner coner-bottom-left"></div>
						<div class="corner coner-bottom-right"></div>
						<span>{{_numbers.monthCount}}</span>
					</div>
				</div>
				<div class="use-cell">
					<div class="num-div num-div-total">
						<div class="corner coner-top-left"></div>
						<div class="corner coner-top-right"></div>
						<div class="corner coner-bottom-left"></div>
						<div class="corner coner-bottom-right"></div>
						<span>{{_numbers.monthComplete}}</span>
					</div>
				</div>
			</div>
			<div class="t-row">
				<div class="first-cell">今天</div>
				<div class="use-cell">
					<div class="num-div" v-for="(chr,index) in _numbers.dayCount" :key="'d-c-'+index">
						<div class="corner coner-top-left"></div>
						<div class="corner coner-top-right"></div>
						<div class="corner coner-bottom-left"></div>
						<div class="corner coner-bottom-right"></div>
						<span>{{chr}}</span>
					</div>
				</div>
				<div class="use-cell">
					<div class="num-div" v-for="(chr,index) in _numbers.dayComplete" :key="'d-cp-'+index">
						<div class="corner coner-top-left"></div>
						<div class="corner coner-top-right"></div>
						<div class="corner coner-bottom-left"></div>
						<div class="corner coner-bottom-right"></div>
						<span>{{chr}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, reactive, toRefs } from 'vue'	
import { numberFormat } from '@/assets/js/utils'
	
const props = defineProps({
	dataSource:{
		type:Object,
		default:function(){
			return {}
		}
	}
})
const {dataSource} = toRefs(props)

const formatCount = function(val){
	let res = '0000';
	if (val)  {
		if (val>9999) val = 9999;
		res = numberFormat(val,4);
	} 
	return res;
}

const formatCountX = function(val){
	let res = '000000';
	if (val)  {
		if (val>999999) val = 999999;
		res = numberFormat(val,6);
	} 
	return res;
}

const _numbers = reactive({
	yearCount:'000000',
	yearComplete:'000000',
	monthCount:'000000',
	monthComplete:'000000',
	dayCount:'0000',
	dayComplete:'0000'
})
_numbers.yearCount = computed(()=>{
	return formatCountX(dataSource.value.YEARIssue_Count)
})
_numbers.yearComplete = computed(()=>{
	return formatCountX(dataSource.value.YEAROK_Count)
})
_numbers.monthCount = computed(()=>{
	return formatCountX(dataSource.value.MONTHIssue_Count)
})
_numbers.monthComplete = computed(()=>{
	return formatCountX(dataSource.value.MONTHOK_Count)
})
_numbers.dayCount = computed(()=>{
	return formatCount(dataSource.value.DAYIssue_Count)
})
_numbers.dayComplete = computed(()=>{
	return formatCount(dataSource.value.DAYOK_Count)
})

</script>

<style scoped lang="scss">
.screen1-module1-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-bottom: 1%;
	.thead{
		height: 20%;
		flex-shrink: 0;
		color: #e4ffff;
		.thead-inner{
			height: 100%;
		}
		.use-cell{
			font-size: .24em;
		}
	}
	.tbody{
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.t-row{
			height: 28%;
			border: 1px solid #085e84;
		}
	}
	.thead-inner,.t-row{
		display: flex;
		.first-cell,.use-cell{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.first-cell{
			width: 3em;
			flex-shrink: 0;
			color: #e4ffff;
			font-size: .24em;
		}
		.use-cell{
			width: 10px;
			flex-grow: 1;
		}
	}
	.t-row{
		.use-cell {
			padding: .1em 0;
		}
	}
	.num-div{
		font-family: electronicFont;
		color: #ffff00;
		font-size: .6em;
		height: 100%;
		width: .72em;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #012b8a;
		box-sizing: border-box;
		border: 1px solid #002ea6;
		position: relative;
		overflow: hidden;
		.corner{
			$cornerSize:.12em;
			position: absolute;
			border-style: solid;
			border-color: #15afa9;
			width: $cornerSize;
			height: $cornerSize;
			z-index: 1;
		}
		.coner-top-left{
			top: 0;
			left: 0;
			border-width: 1px 0 0 1px;
		}
		.coner-top-right{
			top: 0;
			right: 0;
			border-width: 1px 1px 0 0;
		}
		.coner-bottom-left{
			bottom: 0;
			left: 0;
			border-width: 0 0 1px 1px;
		}
		.coner-bottom-right{
			bottom: 0;
			right: 0;
			border-width: 0 1px 1px 0;
		}
		&+.num-div{
			margin-left: .1em;
		}
		&.num-div-total{
			font-size: .6em;
			width: 3.2em;
		}
	}
}
</style>